import React, {useRef} from 'react';
import ProTable, {ActionType, ProColumns} from '@ant-design/pro-table';
import {EmployeeListItem} from '@/pages/Employee/List/data';
import {Tag} from 'antd';
import {employeeSelect, loadPlanPostSelect} from "@/pages/Train/Plan/service";
import {loadPostSelect} from "@/pages/Enterprise/Post/service";

type PlanEmployeeSelectProps = {
  planId?: number;
  keys?: React.Key[];
  onSelectData?: (keys: React.Key[], dataList: EmployeeListItem[]) => void;
};

const PlanEmployeeSelect: React.FC<PlanEmployeeSelectProps> = (props) => {
  const {planId, keys, onSelectData} = props;
  const columns: ProColumns<EmployeeListItem>[] = [
    {
      dataIndex: 'index',
      width: 48,
      align: 'center',
      valueType: 'index',
      render: (dom, entity, index) => {
        return (
          <span>
            {index +
              1 +
              ((actionRef?.current?.pageInfo?.current || 1) - 1) *
              (actionRef?.current?.pageInfo?.pageSize || 5)}
          </span>
        );
      },
    },
    {
      title: '员工姓名',
      key: 'name',
      dataIndex: 'name',
    },
    {
      title: '手机号',
      key: 'mobile',
      dataIndex: 'mobile',
    },
    {
      title: '身份证号',
      key: 'idCard',
      dataIndex: 'idCard',
    },
    {
      title: '岗位',
      key: 'postId',
      dataIndex: 'postName',
      valueType: 'select',
      // @ts-ignore
      request: async () => {
        return loadPostSelect().then(({data}) => {
          return data;
        });
      },

      render: (_, record) => (
        <>
          {record.postName.map((name, index) => (
            <Tag key={name + index + record.employeeId}>{name}</Tag>
          ))}
        </>
      ),
    },
    {
      title: '部门',
      key: 'orgId',
      dataIndex: 'orgId',
      valueType: 'select',
      hideInTable: true,
      params: {time: new Date()},
      // @ts-ignore
      request: async () => {
        return loadPlanPostSelect(planId ?? 0).then(({data}) => {
          return data;
        });
      },
    },
    {
      title: '注册时间',
      key: 'createTime',
      search: false,
      dataIndex: 'createTime',
      valueType: 'dateTime',
    },
  ];
  const actionRef = useRef<ActionType>();
  return (
    <>
      <ProTable<EmployeeListItem>
        headerTitle={'员工列表'}
        actionRef={actionRef}
        columns={columns}
        request={employeeSelect}
        rowKey="employeeId"
        search={{
          // optionRender: false,
          collapsed: false,
          collapseRender: () => {
            return <></>
          },
        }}
        pagination={{
          pageSize: 5,
          // showSizeChanger: false,
        }}
        params={{planId}}
        options={false}
        rowSelection={{
          selectedRowKeys: keys,
          preserveSelectedRowKeys: true,
          onChange: (_, selectedRows) => {
            onSelectData && onSelectData(_, selectedRows);
          },
        }}
      />
    </>
  );
};
export default PlanEmployeeSelect;
